<template>
    <div class="explame">
      <h4 class="red">hello should be red</h4>
      <h4 class="green">hello should be green</h4>
      <h4 class="yellow">hello should be yellow</h4>
    </div>
  </template>

  <script setup>
  import { ref } from 'vue'
  defineOptions({
    name: 'vbind'
  })
  const color1 = ref('red')
  const color2 = ref('green')
  const color3 = ref('yellow')
  </script>
  
  <style lang="scss" scoped>
  .red {
    /* 动态绑定样式 */
    color: v-bind(color1);
  }
  .green {
    color: v-bind(color2);
  }
  .yellow {
    color: v-bind(color3);
  }
  </style>
  